<include file="/public/header" />

<style>
  .layui-card-body {
    padding-left: 0;
  }

  .layui-form-item .layui-input-inline {
    width: 220px;
  }

  body {
    background-color: #fff;
  }

  .proints {
    margin: 10px 0;
  }

  .title {
    font-weight: bold;
    padding: 15px 0;
    font-size: 18px;
  }

  .products {
    width: 100%;
  }

  .products td,
  .products th {
    padding: 12px 15px;
    box-sizing: border-box;
    border: 1px solid #ebeef5;
  }

  .products .label {
    background-color: #f5f7fa;
    font-weight: bold;
  }

  .width1 {
    width: 23%;
    float: left;
    margin-right: 2%;
  }

  .subbord {
    border: 1px solid #ebeef5;
    padding: 20px 2%
  }

  .subbord table {
    margin: 20px 0;
    width: 100%;
  }

  .width2 {
    width: 46%;
    margin: 0 2%;
    float: left;
  }

  .width3 {
    width: 25%;
    float: left;
  }

  .sclass {
    position: absolute;
    z-index: 999999;
    background: #fff;
    padding: 5px;
    border: 1px solid #dedede;
    display: none;
  }
</style>

<div class="layui-fluid">
  <button type="button" onclick="doPrint()" class="layui-btn proints">打印任务单</button>
  <div class="layui-row">
    <div class="width1">
      <div class="title">生产单</div>
      <table class="products">
        <tbody>
          <tr>
            <td class="label" colspan="1">订单id</td>
            <td class="content" colspan="0">{$data.ordersn}</td>
            <td class="label" colspan="1">客户名称</td>
            <td class="content" colspan="0">{$data.custom}</td>
          </tr>
          <tr>
            <td class="label" colspan="1">生产班组</td>
            <td class="content" colspan="0">{$data.team}</td>
            <td class="label" colspan="1">接单人</td>
            <td class="content" colspan="0">{$data.receiver}</td>
          </tr>
          <tr>
            <td class="label" colspan="1">交货日期</td>
            <td class="content" colspan="0">{$data.deliveday}</td>
            <td class="label" colspan="1">下单时间</td>
            <td class="content" colspan="1">{$data.create_time}</td>
          </tr>
          <tr>
            <td class="label" colspan="1">审核人</td>
            <td class="content" colspan="0">{$data.placer|default='无'}</td>
            <td class="label" colspan="1">下单人</td>
            <td class="content" colspan="0">{$data.reviewer|default='无'}</td>
          </tr>
        </tbody>
      </table>
      <div class="title">添加新产品</div>
      <div class="subbord">
        <form class="layui-form layui-form-pane">
          <input type="text" value="{$data.id}" name="id" hidden="" />
          <input type="number" value="0" name="goodid" hidden="" />
          <div class="layui-form-item">
            <label class="layui-form-label">{:__('生产ID')}</label>
            <div class="layui-input-block">
              <input value="{$data.ordersn}" readonly disabled class="layui-input" />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">{:__('产品名称')}</label>
            <div class="layui-input-block">
              <input name="title" id="tipinput" value="" placeholder="{:__('请输入名称')}" type="text" class="layui-input"
                lay-verify="required" />
              <!-- <div id="sousuo" class="sclass">
              </div> -->
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">{:__('锅数')}</label>
            <div class="layui-input-block">
              <input name="guo" placeholder="{:__('请输入锅数')}" type="number" class="layui-input"
                lay-verify="required" />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">{:__('规格')}</label>
            <div class="layui-input-block">
              <input name="spec" value="" placeholder="{:__('请输入规格规格')}" type="text" class="layui-input"
                lay-verify="required" />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">{:__('备注')}</label>
            <div class="layui-input-block">
              <input name="remark" value="" placeholder="{:__('备注说明')}" type="text" class="layui-input" />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">{:__('选择配方')}</label>
            <div class="layui-input-block">
              <div class="peifang" name="peifang"></div>
            </div>
          </div>
          <table class="products" id="products">
            <thead>
              <tr>
                <th width="150" class="label">配方原材料</th>
                <th class="label">每锅材料重量(KG)</th>
                <!-- <th class="label">操作</th> -->
              </tr>
            </thead>
            <tbody id="layui-cailiao-content"></tbody>
          </table>
          <button type="button" class="layui-btn layui-btn-normal layui-cailiao-add">{:__('增加材料')}</button>
          <div class="layui-footer layui-form-item layui-center">
            <button type="reset" class="layui-btn layui-btn-primary">{:__('重置')}</button>
            <button class="layui-btn" lay-edit="{:url('/system/morder/edit')}" lay-filter="submitPage"
              data-reload="self" lay-submit>{:__('提交')}</button>
          </div>
        </form>
      </div>
    </div>
    <div class="width2">
      <div class="title">生产产品列表
      </div>
      <table class="products">
        <thead>
          <tr>
            <th class="label">ID</th>
            <th class="label" width="100">名称</th>
            <th class="label">规格</th>
            <th class="label">数量</th>
            <th class="label">单位</th>
            <th class="label">配方ID</th>
            <th class="label" width="100">配方明细</th>
            <th class="label">备注</th>
            <th class="label">添加时间</th>
            <th class="label" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          <volist name="$orderproduct" id="vo" key="k">
            <tr>
              <th class="content">{$vo.id}</th>
              <th class="content">{$vo.product_name}</th>
              <th class="content">{$vo.product_spec}</th>
              <th class="content">{:floor($vo.product_number*100)/100}</th>
              <th class="content">吨</th>
              <th class="content">{$vo.formulaid}</th>
              <th class="content">
                <div class="layui-table-cell" lay-tips="{$vo.material}"
                  style="width: 100px;overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;">
                  {$vo.material|default="无"}</div>
              </th>
              <th class="content">{$vo.remark|default="无"}</th>
              <th class="content">{$vo.create_time}</th>
              <th class="content">
                <a data-area="560px,90%" data-title="{:__('编辑产品')}" lay-open=""
                  data-url="{:url('/system/morder/pedit')}?id={$vo.id}" lay-event="edit">{:__('修改')}</a>
                <a href="javascript:;" style="color:red" data-confirm="确认删除【{$vo.product_name}】吗?" data-reload="self"
                  lay-ajax="" data-url="{:url('/system/morder/pdel')}?id={$vo.id}">删除</a>
              </th>
            </tr>
          </volist>
        </tbody>
      </table>
      <div style="margin: 25px 0 20px 0;">
        <!--startprint--><!--注意要加上html里star和end的这两个标记-->
        <table class="products">
          <tbody>
            <tr>
              <td align="center" colspan="12"><span style="font-size: 26px;font-weight: bold;">生产任务单</span></td>
            </tr>
            <tr>
              <td class="label" colspan="2" width="100">订单号</td>
              <td class="content" colspan="2">{$data.ordersn}</td>
              <td class="label">客户名称</td>
              <td class="content" colspan="2">{$data.custom}</td>
              <td class="label">任务单号</td>
              <td class="content" colspan="2">{$data.id}</td>
            </tr>
            <tr>
              <td class="label" colspan="2">生产班组</td>
              <td class="content" colspan="2">{$data.team}</td>
              <td class="label">接单人</td>
              <td class="content" colspan="2">{$data.receiver}</td>
              <td class="label">交货日期</td>
              <td class="content" colspan="2">{$data.deliveday}</td>
            </tr>
            <tr>
              <td class="label">序号</td>
              <td class="label" colspan="3" width="150">产品名称</td>
              <td class="label">产品规格</td>
              <td class="label">计划数量</td>
              <td class="label">单位</td>
              <td class="label">实际数量</td>
              <td class="label">配方</td>
              <td class="label">备注</td>
            </tr>
            <volist name="$orderproduct" id="vo" key="k">
              <tr>
                <td class="content">{$k}</td>
                <td class="content" colspan="3">{$vo.product_name}</td>
                <td class="content">{$vo.product_spec}KG</td>
                <td class="content">{$vo.product_number}</td>
                <td class="content">吨</td>
                <td class="content"></td>
                <td class="content">{$k}号</td>
                <td class="content">{$vo.remark|default=""}</td>
              </tr>
            </volist>
            <tr>
              <td class="content">合计</td>
              <td class="content" colspan="3"></td>
              <td class="content"></td>
              <td class="content">{$heji.number|default='0'}</td>
              <td class="content">吨</td>
              <td class="content"></td>
              <td class="content"></td>
              <td class="content"></td>
            </tr>
            <tr>
              <td class="content" rowspan="{:count($orderproduct)+1}">技术说明</td>
            </tr>
            <volist name="$orderproduct" id="vo" key="k">
              <tr>
                <td class="label">{$k|default=''}号</td>
                <td class="content" colspan="8">{$vo.materialxj}</td>
              </tr>
            </volist>
            <tr>
              <td class="label">下单人</td>
              <td class="content" colspan="2">{$data.placer}</td>
              <td class="label">审核人</td>
              <td class="content" colspan="2">{$data.reviewer}</td>
              <td class="label">创建时间</td>
              <td class="content" colspan="3">{$data.create_time}</td>
            </tr>
          </tbody>
        </table>
        <!--endprint-->
      </div>
    </div>
    <div class="width3">
      <div class="title">该生产单消耗原材料明细排行</div>
      <div id="xse" style="height: 400px;margin-top: 0px;"></div>
      <div class="title">该生产单消耗原材料明细
      </div>
      <table class="products">
        <thead>
          <tr>
            <th class="label">总生产量</th>
            <th class="content">{$heji.dun}kg</th>
          </tr>
          <tr>
            <th class="label">预计锅数</th>
            <th class="content">{$heji.guo|default=0}锅</th>
          </tr>
          <tr>
            <th class="label">原材料</th>
            <th class="label">材料消耗</th>
          </tr>
        </thead>
        <tbody>
          <volist name="$allmaterial" id="vo" key="k">
            <tr>
              <td class="content" colspan="1">{$vo.materialtitle}</td>
              <td class="content" colspan="0">{:floor($vo.allweights*100)/100}kg</td>
            </tr>
          </volist>
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>
</div>
<include file="/public/footer" />
<include file="/public/static" />
<script src="__STATICADMIN__module/echarts/echarts.js"></script>
<script type="text/javascript">
  function doPrint() {
    var newWindow = window.open("打印窗口", "_blank");
    bdhtml = window.document.body.innerHTML;
    sprnstr = "<!--startprint-->";
    eprnstr = "<!--endprint-->";
    prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
    prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
    prnhtml = '<style>table{border-collapse:collapse;border-spacing:0}.layui-card-body{padding-left:0;}.layui-form-item .layui-input-inline{width:220px;}body{background-color:#fff;}.proints{margin:10px 0;}.title{font-weight:bold;padding:15px 0;font-size:18px;}.products{width:100%;}.products td,.products th{padding:12px 15px;box-sizing:border-box;border:1px solid #ebeef5;}.products .label{background-color:#f5f7fa;font-weight:bold;}.width1{width:23%;float:left;margin-right:2%;}.subbord{border:1px solid #ebeef5;padding:20px 2%}.subbord table{margin:20px 0;width:100%;}.width2{width:46%;margin:0 2%;float:left;}.width3{width:25%;float:left;}.sclass{position:absolute;z-index:999999;background:#fff;padding:5px;border:1px solid #dedede;display:none;}</style>' + prnhtml;
    newWindow.document.write(prnhtml);
    newWindow.document.close();
    newWindow.print();
    newWindow.close();
  }
</script>
<script>
  layui.use(['form', 'jquery', 'layedit', 'admin'], function () {
    var form = layui.form;
    var jquery = layui.jquery;
    var material = {$material|raw};
  var formula = {$formula|raw};
  var allmaterial = {$allmaterial|raw};
  // 渲染销售额图表
  var matname = [];//材料名称
  var matweight = [];//材料重量
  var mattotal = [];//材料价格
  layui.$.each(allmaterial, function (i, obj) {
    matname.push(obj.materialtitle);
    matweight.push(Number(obj.allweights));
    mattotal.push(Number(obj.alltotal));
  });
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('xse'));
  //x轴
  var option;
  option = {
    xAxis: {
    },
    yAxis: {
      type: 'category',
      axisLabel: { interval: 0, rotate: 50 },
      splitLine: { show: true },
      data: matname,
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
    },
    grid: {
      left: 1,
      right: 30,
      containLabel: true
    },
    series: [
      {
        realtimeSort: true,
        name: '重量',
        type: 'bar',
        data: matweight,
        label: {
          show: true,
          position: 'right',
          valueAnimation: true,
          formatter: '{c}kg'
        }
      }
    ],
    legend: {
      show: false
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  };
  myChart.setOption(option);
  //默认隐藏地址信息
  layui.$('#sousuo').hide();
  //点击元素外其它地方隐藏
  layui.$('body').bind('click', function (event) {
    layui.$('#sousuo').hide();
  });
  //阻止冒泡
  layui.$('#sousuo').click(
    function (e) {
      e.stopPropagation()
    }
  );
  //输入框的值改变时触发
  // layui.$("#tipinput").on("input", function (e) {
  //   //获取input输入的值
  //   layui.$.get("{:url('/ajax/getoproduct')}",
  //     { keyword: e.delegateTarget.value, type: 1 }, function (res) {
  //       if (res.code == 200 && res.data.length > 0) {
  //         str = '';
  //         layui.$.each(res.data, function (i, obj) {
  //           str += '<input lay-filter="getsou" type="radio" name="suosuo" value="' + obj.id + '" title="' + obj.title + '"><br/>';
  //         });
  //         layui.$('#sousuo').html(str);
  //         layui.$('#sousuo').show();
  //         form.render();
  //       } else {
  //         layui.$('#sousuo').hide();
  //       }
  //       layui.$('input[name=spec]').val('');
  //       layui.$('input[name=price]').val('');
  //       layui.$('input[name=goodid]').val(0);
  //       xmd.setValue([]);
  //       dratable([], 0);
  //     }, 'json');
  // });
  //监听地址选择
  form.on('radio(getsou)', function (data) {
    console.log(data);
    layui.$.get("{:url('/ajax/getoproduct')}",
      { keyword: data.value, type: 2 }, function (res) {
        if (res.code == 200 && res.data) {
          layui.$('input[name=title]').val(res.data.title);
          layui.$('input[name=spec]').val(res.data.spec);
          layui.$('input[name=goodid]').val(res.data.id);
          layui.$('input[name=price]').val(res.data.price);
          xmd.setValue([res.data.formulaid]);
          dratable(res.data.list, 0);
          layui.$('#sousuo').hide();
          form.render();
        }
      }, 'json');
  });
  // 监听权限提交
  form.on("submit(submitPage)", function (post) {
    // 获取用户id
    var pageThat = layui.$(this),
      _pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
    // 开始POST提交数据
    layui.$.post(_pageUrl,
      post.field, function (res) {
        if (res.code === 200) {
          layer.msg(res.msg, function () {
            location.reload();
          });
          pageThat.attr("disabled", true);
        }
        else {
          layer.error(res.msg);
        }

      }, 'json');
    return false;
  })
  var datas = []; //配方数据
  var xmd = xmSelect.render({
    el: '.peifang',
    tips: '请选择配方',
    initValue: [],
    name: 'peifang',
    filterable: true,
    radio: true,
    repeat: true,
    clickClose: true,
    cascader: {
      show: true,
      strict: true,
      indent: 250
    },
    prop: {
      name: 'title',
      value: 'id',
    },
    tree: {
      show: true,
      strict: false,
      showLine: false,
      simple: true,
    },
    model: {
      icon: 'hidden',
      label: {
        type: 'text'
      }
    },
    theme: {
      color: '#1890FF'
    },
    data() {
      return formula
    },
    on: function (onresult) {
      //change, 此次选择变化的数据,数组
      var change = onresult.change;
      // 开始POST提交数据
      var number = layui.$("#tipinput").val();
      getdratable(change[0]['id'], number);

    },
  })
  //输入框的值改变时触发
  layui.$("#tipinput").on("input", function (e) {
    //获取input输入的值
    if (datas.length > 0) {
      dratable(datas, e.delegateTarget.value);
    }
  });
  //请求ID并渲染表格
  var getdratable = function (id, number) {
    layui.$.ajax({
      url: '{:url("/system/formula/fadd")}',
      type: 'get',
      dataType: 'json',
      data: {
        id: id
      },
      success(data) {
        datas = [];
        if (data.code == 200) {
          datas = data.data.list;
          dratable(data.data.list, number);
        }
      }
    });
  }
  // 根据数据渲染表格
  var dratable = function (data = [], number = 0) {
    number = Number(number);
    var html = '<tr>';
    layui.$.each(data, function (index, type) {
      html += '<td class="content"><select readonly name="list[' + index + '][material]" lay-search=""><option value="">搜索原材料</option>';
      layui.$.each(material, function (key, mdata) {
        html += '<option value="' + mdata.id + '"';
        if (type.material == mdata.id) {
          html += 'selected';
        }
        html += '>' + mdata.title + '</option>';
      });
      html += '</select></td>';
      html += '<td class="content"><input readonly name="list[' + index + '][size]" value="' + type.size + '" type="number" class="layui-input"  lay-verify="required" ><\/td>';
      // html += '<td class="content"><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-delete"><\/i><\/button><\/td>';
      html += '</tr>';
    });
    // html += '';
    layui.$('#layui-cailiao-content').html(html);
    form.render();
  }
  // 增加材料
  // jquery('.layui-cailiao-add').on('click', function () {

  //   var trnumber = jquery('#layui-cailiao-content tr').length;
  //   var html = '<tr>';
  //   html += '<td><select readonly name="list[' + trnumber + '][material]" lay-search=""><option value="">可输入搜索<\/option>';
  //   layui.$.each(material, function (index, type) {
  //     html += '<option value="' + type.id + '">' + type.title + '</option>';
  //   });
  //   html += '<\/select><\/td>';
  //   html += '<td><input readonly name="list[' + trnumber + '][size]" type="text" class="layui-input"  lay-verify="required" ><\/td>';
  //   html += '<td><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-delete"><\/i><\/button><\/td>';
  //   html += '<\/tr>';
  //   jquery('#layui-cailiao-content').append(html);
  //   form.render();
  // })
  // 删除签到数据
  jquery('body').on('click', '#layui-cailiao-content .layui-btn', function () {
    jquery(this).parents('tr').remove();
  })
});
</script>